<!-- 文章举报管理 -->
<!-- 韩佳轩 6-15 -->

<template>
  <div id="ArticleReport">
    <div>
      <!-- 上方模糊查文本框样式 -->
      <!-- <el-row>
        <el-col :span="10">
          <el-row>
            <el-col :span="4">举报类型：</el-col>
            <el-col :span="14">
              <el-input placeholder="请输入标题" v-model="queryArticleReport.reportType" clearable> </el-input>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="8">
          <el-button type="primary" v-on:click="getArticleReport()">查询</el-button>
        </el-col>
      </el-row> -->

      <el-card style="margin-bottom: 10px">
        <el-input v-model="queryArticleReport.reportType" clearable style="width: 200px" placeholder="请输入举报类型"
          suffix-icon="el-icon-message"></el-input>
        <el-button class="custom-button ml-10" icon="el-icon-search" @click="getArticleReport()">搜索</el-button>
      </el-card>
      <!--====================================================================================================================== -->
      <el-card>
        <el-table :data="ArticleReportData" border stripe max-height="600">
          <el-table-column fixed prop="reportingUserName" label="举报人（举报用户）" width="180px" align="center">
          </el-table-column>
          <el-table-column prop="reportedUserName" label="被举报人（被举报用户）" width="180px" align="center">
          </el-table-column>
          <el-table-column prop="reportType" label="举报类型" width="180px" align="center">
          </el-table-column>
          <!-- <el-table-column prop="imageId" label="文章图片" width="100" align="center">
             <template slot-scope="scope">
            <img :src="$imageUrl+scope.row.images" style="width:70px;height:70px;">
            </template>
            </el-table-column> -->
          <!-- <el-table-column prop="reportConent" label="文章内容" width="180px" align="center">
            </el-table-column> -->
          <el-table-column prop="reportDetails" label="举报详情" width="" align="center">
          </el-table-column>
          <el-table-column prop="reportStatus" label="举报状态" align="center">
            <span slot-scope="scope">
              {{ String(scope.row.reportStatus) === "1" ? "已处理" : "未处理" }}
            </span>
          </el-table-column>
          <el-table-column prop="processingResult" label="处理结果" width="" align="center">
            <template slot-scope="scope">
              <el-tag class="pass_button1" effect="plain" v-if="scope.row.processingResult == 1">同意</el-tag>
              <el-tag type="danger" effect="plain" v-if="scope.row.processingResult == 2">驳回</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="processorName" label="处理人员" width="" align="center">
          </el-table-column>
          <el-table-column prop="processingTime" label="处理时间" width="160" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="130" align="center">
            <template slot-scope="scope">
              <el-button :style="{ color: '#2cd3b5' }" size="medium " type="text" icon="el-icon-search"
                @click="openDateilWindow(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页 -->
      <el-pagination class="pageAll" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="5"
        layout="total, sizes, prev, pager, next, jumper" :total="total" style="text-align: center">
      </el-pagination>
      <el-dialog title="查看举报信息" :visible.sync="delailHouse" center>
        <el-descriptions :model="ArticleReportFrom" :column="1" size="medium" border>
          <el-descriptions-item label="举报人">
            {{ ArticleReportFrom.reportingUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="被举报人">
            {{ ArticleReportFrom.reportedUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="举报类型">
            {{ ArticleReportFrom.reportType }}
          </el-descriptions-item>
          <el-descriptions-item label="举报详情">
            {{ ArticleReportFrom.reportDetails }}
          </el-descriptions-item>
          <el-descriptions-item label="文章内容">
            <div v-html="ArticleReportFrom.reportConent"></div>
          </el-descriptions-item>

          <template slot="extra" v-if="!ArticleReportFrom.processingResult">
            <el-button @click="updateAgree(ArticleReportFrom)" class="custom-button" icon="el-icon-check"
              size="small">通过</el-button>
            <el-button @click="UpdateReject(ArticleReportFrom)" class="custom-buttonT" icon="el-icon-close"
              size="small">驳回</el-button>
          </template>
        </el-descriptions>
      </el-dialog>
      <!-- 修改驳回原因信息 -->
      <!-- <el-dialog title="填写驳回原因" :visible.sync="reject">
        <el-form
          :model="aa"
          ref="ArticleReportFrom"
          label-width="100px"
          class="demo-ArticleReportFrom"
        >
          <el-form-item label="驳回原因" prop="rejectionReason">
            <el-input v-model="aa.rejectionReason"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reject = false">取 消</el-button>
          <el-button type="primary" @click="UpdateReject()">确 定</el-button>
        </div>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import dateUtil from "../../util/date";
export default {
  name: "sysArticle",
  template: "#sysArticle",
  data() {
    return {
      reportIdss: 0,//被举报人id
      reportId: "",
      reportType: "", // 名称属性
      ArticleReportData: [], // 全查页面
      loading: true, // loading加载
      delailHouse: false, // 默认查看弹窗关闭
      loginName: window.sessionStorage.getItem("loginName"), //当前登录者loginName
      reject: false,
      // 模糊查实体对象
      queryArticleReport: {
        reportType: "",
      },
      content: "您成功举报成功该用户发布的文章~",
      contenty: "您的文章不适合用户观看请重新修改后再次上传文章~",
      contents:
        "很抱歉您举报的文章经审核该文章没有任何问题请如发现问题请再次提交申请",
      toUserId: "",
      type: "app", //系统信息
      inceptId: 1,
      id: 0,
      msg: [],
      checkType: 2,
      inceptIds: [],
      // 接收人对象
      lt: {
        content: "",
        toUserId: "",
        type: "check-person",
        uuid: "", //获取随机id,
        checkType: "2",
        createTime: "",
      },
      inceptForm: {},
      // 分页
      total: 0, // 数据总条数
      pageNum: 1, // 当前页
      pageSize: 5, // 每页几条数据
      // imageUrl: "", //上传图片路径
      // 表单对象
      ArticleReportFrom: {
        id: 0,
        reportingUserName: "",
        reportedUserName: "",
        reportType: "",
        reportDetails: "",
        reportStatus: "",
        createTime: "",
        updateTime: "",
        rejectionReason: "",
        processingTime: "",
        reportingUserId: "",
        reportedUserId: "",
        processorName: "",
        reportConent: "",
        reportId: "",
      },
      aa: {
        rejectionReason: "",
      },
    };
  },
  mounted() {
    this.getArticleReport(); // 初始化
    this.processorName = window.sessionStorage.getItem("loginName");
  },
  methods: {
    openDateilWindow(row) {
      // 打开查看弹窗
      this.ArticleReportFrom = JSON.parse(JSON.stringify(row));
      this.delailHouse = true;
    },
    openupdateWindow() {
      this.aa.rejectionReason = this.ArticleReportFrom.rejectionReason;
      //   //打开修改弹窗
      //   this.ArticleReportFrom = JSON.parse(JSON.stringify(scope)); //回显
      this.reject = true;
    },
    //获取现在时间
    getNowTime() {
      return dateUtil.getTimeNow();
    },

    // 分页
    handleSizeChange(val) {
      // 改变每页条数
      this.pageSize = val;
      this.getArticleReport();
    },
    handleCurrentChange(val) {
      // 改变当前页
      this.pageNum = val;
      this.getArticleReport();
    },

    // 发送消息 （发送给被举报人信息）
    sendMsg(reportIdss, text) {
      if (this.contenty.trim() !== "") {
        let lt = {
          toUserId: reportIdss, //发送人
          checkReason: this.contenty + ",原因是：" + text, // 发送信息内容
          checkType: this.checkType,
          type: "check-person",
          uuid: this.reportIdss + uuidv4(),
          createTime: dateUtil.getMinuteNow(), //获取现在时间
          isRead: 0,
        }; // 发送消息
        this.$websocket.ws.send(JSON.stringify(lt));
      } else {
        this.message("不能发送空消息", "warning");
        // 清除文本框空格
        this.content = this.content.trim();
      }
    },

    // 发送消息 通过 （发给报人消息）
    sendMsgs(reportingUserId) {
      if (this.content.trim() !== "") {
        let lt = {
          toUserId: reportingUserId, //发送人
          checkReason: this.content, // 发送信息内容
          checkType: this.checkType,
          uuid: this.reportingUserId + uuidv4(),
          createTime: dateUtil.getMinuteNow(), //获取现在时间
          type: "check-person",
          isRead: 0,

        };
        // 发送消息
        this.$websocket.ws.send(JSON.stringify(lt));
      } else {
        this.message("不能发送空消息", "warning");
        // 清除文本框空格
        this.content = this.content.trim();
      }
    },

    //发送信息 驳回
    sendMsgseqw(reportingUserId) {
      if (this.contents.trim() !== "") {
        let lt = {
          toUserId: reportingUserId, //发送人
          checkReason: this.contents, // 发送信息内容
          checkType: this.checkType,
          uuid: this.reportingUserId + uuidv4(),
          createTime: dateUtil.getMinuteNow(), //获取现在时间
          type: "check-person",
          isRead: 0,
        };
        // 发送消息
        this.$websocket.ws.send(JSON.stringify(lt));
      } else {
        this.message("不能发送空消息", "warning");
        // 清除文本框空格
        this.content = this.content.trim();
      }
    },

    getArticleReport() {
      // 获取所有文章信息(全查)
      this.$axios
        .get("/Sys/ReportArticle", {
          params: {
            reportType: this.queryArticleReport.reportType, // 文章名称
            pageNum: this.pageNum, //  当前页
            pageSize: this.pageSize, // 每页几条数据
          },
        })
        .then((res) => {
          if (res.data.flag) {

            this.ArticleReportData = res.data.data.content;
            this.total = res.data.data.totalSize; // 分页
          }
          this.loading = false;
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },

    // 同意文章
    updateAgree(data) {
      this.$prompt("请输入文章下架问题", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$axios
            .delete("/Sys/updateAgree", {
              params: {
                id: this.ArticleReportFrom.id,
                processorName: this.processorName,
                rejectionReason: this.value,
              },
            })
            .then((res) => {
              if (res.data.flag) {
                // this.myMessage("success", "已举报成功");
                this.getArticleReport();
                //将医生id转换为用户id
                this.$axios
                  .get("/physician/getPhysicianUserid", {
                    params: {
                      id: data.reportedUserId, // 医生id
                    },
                  })
                  .then((res) => {
                    if (res) {
                      this.reportIdss = res.data.data;
                      this.sendMsg(this.reportIdss, value);//发送给被举报人下架原因
                    }
                  })
                this.sendMsgs(data.reportingUserId);//发送给举报人举报结果
                this.delailHouse = false;
                this.$axios
                  .delete("/Sys/SysdelArticle?id=" + data.reportId)
                  .then((res) => {
                    if (res.data.flag) {
                      this.myMessage("success", "删除成功");
                    } else {
                      this.myMessage("warning", "删除失败！");
                    }
                  })
              } else {
                this.myMessage("warning", "失败！");
              }
            })
            .catch((res) => {
              this.myMessage("error", "失败,请联系管理员");
            });
        })
        .catch(() => {
          this.myMessage("info", "已取消");
        });
    },
    // 驳回文章
    UpdateReject(data) {
      this.$confirm("此操作将驳回该用户的举报信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          const form = new FormData();
          form.set("id", this.ArticleReportFrom.id);
          form.set("processorName", this.processorName);
          this.$axios.put("/Sys/updateReject", form).then((res) => {
            if (res.data.flag) {
              this.myMessage("success", "修改成功");
              this.reject = false;
              this.delailHouse = false;
              this.sendMsgseqw(data.reportingUserId);
              this.getArticleReport();
            } else {
              this.myMessage("warning", "修改失败！");
            }
          });
        })
        .catch(() => { });
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
  },
};
</script>

<style scoped>
/*同意按钮 */
.pass_button {
  background-color: #d4f8f1;
  /* 设置按钮的背景颜色 */
  color: #2cd3b5;
  /* 设置按钮里的字体颜色 */
  border-color: #d4f8f1;
  /* 设置按钮的边框颜色 */
}

.custom-button {
  background-color: #2cd3b5;
  /* 设置按钮的背景颜色 */
  color: #fff;
  /* 设置按钮里的字体颜色 */
  border-color: #2cd3b5;
  /* 设置按钮的边框颜色 */
}

/*分页*/
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2cd3b5;
  color: #fff;
}

::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2cd3b5;
  color: #fff;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #2cd3b5;
}
</style>
